<template>
  <div class="back">
    <div class="top_div">
      <div class="navigationBar">
        <div class="tag_div">
          <a-image
            src="LOGO.png"
            class="tag"
            :preview="false"
            @click="toAdmin"
          ></a-image>
        </div>
        <div class="menu_div">
          <a-menu
            v-model:selectedKeys="current"
            mode="horizontal"
            class="menu_top"
          >
            <a-menu-item @click="toUsermanage" key="0">用户管理</a-menu-item>
            <a-menu-item @click="toRoles" key="1">角色管理</a-menu-item>
            <a-menu-item @click="toLabelmanage" key="2">标签管理</a-menu-item>
            <a-menu-item @click="toPostmanage" key="3">帖子管理</a-menu-item>
            <a-menu-item @click="toPostjudge" key="4">帖子审核</a-menu-item>
            <a-menu-item @click="toReportmanage" key="5">举报管理</a-menu-item>
            <a-menu-item @click="toTasks" key="6">任务管理</a-menu-item>
          </a-menu>
        </div>

        <div class="login_div">
          <div v-if="false">
            <a-button type="primary" style="border-radius: 10px">
              登录
            </a-button>
          </div>
          <div v-else>
            <a-dropdown :placement="bottomRight" :trigger="['click']">
              <a @click.prevent>
                <span>
                  <a-badge>
                    <a-avatar shape="square">
                      <template #icon>
                        <a-image
                          style="border-radius: 10px"
                          src="LOGO001.png"
                          :preview="false"
                        ></a-image>
                      </template>
                    </a-avatar>
                  </a-badge>
                </span>
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu style="margin-top: 5px">
                  <a-menu-item key="0" @click="toAdmin">管理员主页</a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="1" @click="toHome">角色切换</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </div>
    </div>

    <!-- 网站信息 -->
    <div class="admin-info" style="padding: 2px 10px 10px">
      <h4 class="admintitle">管理员界面</h4>
      <div>
        <div class="basicinfo">
          <li class="info">网站名称：沙坡BBS</li>
          <li class="info">网站网址：待定</li>
          <li class="info">面向群体：XJTU</li>
        </div>
        <div class="addinfo">
          <h4 class="addinfo-title">统计信息</h4>
          <div class="addinfo-info">
            <li class="info">贴子数：<span>{{ postNum }}</span></li>
            <li class="info">
              用户数：<span>{{ userNum }}</span>
            </li>
          </div>
        </div>
      </div>
    </div>

    <div class="admin-center">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { EventSourcePolyfill } from "event-source-polyfill";
import { getLocalToken,get } from "@/common";
import { ref } from "vue";

const current = ref();

const router = useRouter(); //获取路由器

const userNum = ref({});
const getUserNum = () => {
  get("/admin/user/getUserNum").then((res) => {
    userNum.value = res.data;
  });
};
getUserNum();

const postNum = ref({});
const getPostNum = () => {
  get("/admin/user/getPostNum").then((res) => {
    postNum.value = res.data;
  });
};
getPostNum();

const toHome = () => {
  router.push({ path: "/home" });
};

const toAdmin = () => {
  router.push({ path: "/admin" });
};

const toUsermanage = () => {
  router.push({ path: "/admin/users" });
};

const toRoles = () => {
  router.push({ path: "/admin/roles" });
};

const toLabelmanage = () => {
  router.push({ path: "/admin/labels" });
};

const toPostmanage = () => {
  router.push({ path: "/admin/posts" });
};

const toPostjudge = () => {
  router.push({ path: "/admin/judge" });
};

const toReportmanage = () => {
  router.push({ path: "/admin/report" });
};

const toTasks = () => {
  router.push({ path: "/admin/tasks" });
};

//进入登录页面的按钮
const tologin = () => {
  router.push({ path: "/login" });
};

// 实时消息，勿改！！！
const eventSource = new EventSourcePolyfill("/api/message/subscribe", {
  headers: {
    "X-Custom-Header": "value",
    Token: getLocalToken(),
  },
});

eventSource.onmessage = (event) => {
  console.log(event);
};
</script>

<style>
body {
  background-color: rgb(238, 238, 238);
}

.admintitle {
  font-size: 22px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding: 1px 10px 1px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: normal;
  margin-top: 10px;
  text-align: left;
}

.back {
  height: 100%;
}

.top_div {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 5px 10px -10px gray;
  background-color: rgb(255, 255, 255);
}

.navigationBar {
  line-height: 60px;
  border: 5px;
  min-width: 1156px;
}

.tag_div {
  height: 60px;
  float: left;
  width: 200px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.tag {
  height: 40px;
}

.menu_div {
  float: left;
  height: 60px;
  overflow-x: hidden;
}

.menu_top {
  height: 60px;
  display: flex;
  align-items: center;
  border: none;
}

.login_div {
  width: 100px;
  height: 60px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-info {
  width: 70%;
  height: 200px;
  vertical-align: middle;
  margin-top: 10px;
  position: relative;
  margin-right: 15%;
  margin-left: 15%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
}

.basicinfo {
  list-style: none;
  font-size: 15px;
  height: 150px;
  width: 550px;
  float: left;
}
.basicinfo .info {
  padding: 5px 5px 5px;
}

.addinfo {
  float: left;
  height: 150px;
}
.addinfo-title {
  font-size: 16px;
  border-left: 3px solid rgba(0, 0, 0, 0.8);
  padding: 1px 10px 1px;
  line-height: 16px;
  margin-bottom: 15px;
  font-weight: normal;
  margin-top: 10px;
  text-align: left;
}

.addinfo-info {
  list-style: none;
  font-size: 15px;
}
.addinfo-info .info {
  padding: 5px 5px 5px;
}

.admin-center {
  width: 70%;
  vertical-align: middle;
  margin-top: 10px;
  position: relative;
  margin-right: 15%;
  margin-left: 15%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
}

.home_left {
  width: 68%;
  height: 100px;
  float: left;
  position: relative;
}

.home_right {
  width: 30%;
  height: 100px;
  float: right;
  position: relative;
  background: gray;
}

.left_top {
  background-color: rgb(238, 238, 238);
  height: 50px;
}

.left_top_button {
  width: 80px;
  height: 50px;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>